<template>
  <div>

    <SkyCardPanel title="单个开合面板">
      <div slot="main">
        <SkyScalingCase>
          <div slot="search">

            <SkyLayoutRow>
              <SkyLayoutCol :width="88">
                <div style="line-height:32px;text-align:right;margin-right:22px">搜索：</div>
              </SkyLayoutCol>
              <SkyLayoutCol :width="255">
                <sky-input v-model="form.key" placeholder="请输入内容">
                  <sky-icon-font name="Search" slot="suffix"></sky-icon-font>
                </sky-input>
              </SkyLayoutCol>
            </SkyLayoutRow>

          </div>
          <SkyScalingPanel :label="'筛选条件'" panekey="first">

            <SkyRadioGroup label="项目类别：" v-model="form.radio1">
              <SkyRadio label="政务" value="0"></SkyRadio>
              <SkyRadio label="地产" value="1"></SkyRadio>
              <SkyRadio label="金融" value="2"></SkyRadio>
              <SkyRadio label="教育" value="3"></SkyRadio>
              <SkyRadio label="运维" value="4"></SkyRadio>
            </SkyRadioGroup>

          </SkyScalingPanel>
        </SkyScalingCase>
      </div>
    </SkyCardPanel>

    <SkyHiddenPanel title="代码">
      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="html">
              //单个开合面板
              
              &lt;SkyCardPanel title="单个开合面板"&gt;
                &lt;div slot="main"&gt;
                  &lt;SkyScalingCase&gt;
                    &lt;div slot="search"&gt;
                     &lt;sky-input v-model="form.key" placeholder="请输入内容"&gt;
                        &lt;sky-icon-font name="Search" slot="suffix"&gt;&lt;/sky-icon-font&gt;
                      &lt;/sky-input&gt;
                    &lt;/div&gt;
                    &lt;SkyScalingPanel label="筛选条件" panekey="first"&gt;
                      &lt;p&gt;筛选......1&lt;/p&gt;
                      &lt;p&gt;筛选......2&lt;/p&gt;
                      &lt;p&gt;筛选......3&lt;/p&gt;
                    &lt;/SkyScalingPanel&gt;
                  &lt;/SkyScalingCase&gt;
                &lt;/div&gt;
              &lt;/SkyCardPanel&gt;

          </code>
      </pre>
      </div>
    </SkyHiddenPanel>

    <SkyCardPanel title="多个开合面板">
      <div slot="main">
        <SkyScalingCase>
          <div slot="search">
            <sky-input v-model="form.key" placeholder="请输入内容">
              <sky-icon-font name="Search" slot="suffix"></sky-icon-font>
            </sky-input>
          </div>
          <SkyScalingPanel :label="{'on':'高级搜索', 'off': '搜索'}" panekey="first">
            <p>筛选......1</p>
            <p>筛选......2</p>
            <p>筛选......3</p>
          </SkyScalingPanel>
          <SkyScalingPanel label="高级搜索" panekey="second">
            <p>搜索......1</p>
            <p>搜索......2</p>
            <p>搜索......3</p>
          </SkyScalingPanel>
          <SkyScalingPanel :label="{'on':'展开', 'off': '关闭'}" panekey="third">
            <p>搜索......1</p>
            <p>搜索......2</p>
            <p>搜索......3</p>
          </SkyScalingPanel>
        </SkyScalingCase>
      </div>
    </SkyCardPanel>

    <SkyHiddenPanel title="代码">
      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="html">
              //多个开合面板
              //label 可传入 String 或 Object
              //Object 格式为 {'on':'xx', 'off': xx'}
              
             &lt;SkyCardPanel title="多个开合面板"&gt;
              &lt;div slot="main"&gt;
                &lt;SkyScalingCase&gt;
                  &lt;div slot="search"&gt;
                   &lt;sky-input v-model="form.key" placeholder="请输入内容"&gt;
                      &lt;sky-icon-font name="Search" slot="suffix"&gt;&lt;/sky-icon-font&gt;
                    &lt;/sky-input&gt;
                  &lt;/div&gt;
                  &lt;SkyScalingPanel :label="{'on':'高级搜索', 'off': '搜索'}" panekey="first"&gt;
                    &lt;p&gt;筛选......1&lt;/p&gt;
                    &lt;p&gt;筛选......2&lt;/p&gt;
                    &lt;p&gt;筛选......3&lt;/p&gt;
                  &lt;/SkyScalingPanel&gt;
                  &lt;SkyScalingPanel label="高级搜索" panekey="second"&gt;
                    &lt;p&gt;搜索......1&lt;/p&gt;
                    &lt;p&gt;搜索......2&lt;/p&gt;
                    &lt;p&gt;搜索......3&lt;/p&gt;
                  &lt;/SkyScalingPanel&gt;
                  &lt;SkyScalingPanel :label="{'on':'展开', 'off': '关闭'}" panekey="third"&gt;
                    &lt;p&gt;搜索......1&lt;/p&gt;
                    &lt;p&gt;搜索......2&lt;/p&gt;
                    &lt;p&gt;搜索......3&lt;/p&gt;
                  &lt;/SkyScalingPanel&gt;
                &lt;/SkyScalingCase&gt;
              &lt;/div&gt;
            &lt;/SkyCardPanel&gt;

          </code>
      </pre>
      </div>
    </SkyHiddenPanel>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        form: {
          key: '',
          radio1: '3',
        },
      }
    }
  }
</script>

<style lang="scss" scoped>
.s {
}
</style>